<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jshx.echarts.1.0.js"></script>
    <title>双饼状图</title>
    <style>
        .demo {
            margin: 50px auto;
            width: 500px;
            height: 300px;
        }

        body {
            background: #82b9fd;
        }
    </style>
</head>

<body>
    <div id="main1" class="demo"></div>
    <script>
        var main1 = new HxChartDoublePie('main1');
        main1.option.color = ['#e6e6e6', '#2ba1f9', '#5f7aff', '#0154ba', '#ff9600', '#1e7e00', '#7b0099', '#bc0000', '#ea4800', '#007774', '#703d12', '#b27c54', '#999999'];
        main1.option.title = [
            {
                text: '在线构建',
                x: '25%',
                bottom: 40,
                textAlign: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            {
                text: '在线构建',
                x: '75%',
                bottom: 40,
                textAlign: 'center',
                textStyle: {
                    fontSize: 14
                }
            }
        ];
        main1.option.series[0].radius = [0, '50%'];
        main1.option.series[0].center = ["25%", "40%"];
        main1.option.series[0].label = {
            formatter: "{d}%",
            color: 'black'
        }
        main1.option.series[0].labelLine = {
            show: false,
            length: 5,
            length2: 0
        };

        main1.option.series[1].radius = [0, '50%'];
        main1.option.series[1].center = ["75%", "40%"];
        main1.option.series[1].label = {
            formatter: "{d}%",
            color: 'black'
        }

        main1.option.series[1].labelLine = {
            show: false,
            length: 5,
            length2: 0
        };


        var category = ['亭湖', '盐都', '大丰', '东台', '建湖', '射阳', '阜宁', '滨海', '响水'];
        category.forEach(function (value) {
            main1.putDataLeft(value, Math.ceil(Math.random() * 100));
            main1.putDataRight(value, Math.ceil(Math.random() * 100));
        });



        main1.option.series[0].itemStyle.borderColor = '#82b9fd';
        main1.option.series[0].itemStyle.borderWidth = 3;
        main1.option.series[1].itemStyle.borderColor = '#82b9fd';
        main1.option.series[1].itemStyle.borderWidth = 3;
        main1.init();
        // main1.trim();



    </script>
</body>

</html>